<template>
  <el-dialog
    :title="title || ''"
    :visible.sync="show"
    :width="width || '450px'"
    :append-to-body="true"
    top="50px"
    @close="handlleCancel"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <slot></slot>
    <span slot="footer" v-if="!hideFooter">
      <el-button @click="handlleCancel" size="small">{{
        $t("common.cancel")
      }}</el-button>
      <slot name="btns"></slot>
      <el-button
        type="primary"
        :disabled="loading"
        @click="debouncedHandleConfrim"
        size="small"
        >{{ $t("common.comfir") }}</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import _ from "lodash";
export default {
  props: ["width", "title","hideFooter"],
  data() {
    return {
      show: false,
      loading: false,
    };
  },
  created() {
    // 使用 lodash 的 debounce 方法来限制 handleConfrim 的执行频率
    this.debouncedHandleConfrim = _.debounce(this.handleConfrim, 500, {
      leading: true,
      trailing: false,
    });
  },
  methods: {
    close() {
      this.show = false;
    },
    open() {
      this.show = true;
    },
    handleConfrim() {
      this.$emit("confrim");
    },
    handlleCancel() {
      this.$emit("cancel");
      this.close();
    },
  },
};
</script>
